<template>
	<view class="record-item flex--row" @click="$emit('checkSpot')" :class="{'active':active}">
		<view class="record-item-spot flex--row">
			<view class="spot-image icon--large">
				<image :aria-label="record.name+'照片'" :src="record.img"  mode="center"></image>
			</view>
			<view class="spot-info flex--col">
				<text class="spot-info-name text--main-dark">{{record.name}}</text>
				<text class="spot-info-notice text--secondary-dark">{{record.description}}</text>
			</view>
		</view>
		<view class="record-item-check">
			<image :aria-label="'未打卡'+record.name" src="@/static/ongoing/uncheck.svg" class="icon" :class="{'active':record.recordTime === null}"></image>
			<image :aria-label="'已打卡'+record.name" src="@/static/ongoing/checked.svg" class="icon"  :class="{'active':record.recordTime !== null}" ></image>
		</view>
	</view>
</template>

<script>
	export default {
		emits:['checkSpot'],
		props:{
			active:{
				type:Boolean,
				default:false,
			},
			record:{
				type:Object
			}
		}
	}
</script>

<style lang="scss">
	/* 字体设置 */
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 14px;
		font-weight: 500;
		color:#333;
	}
	/* RecordItem */
	.record-item{
		transition: all 1s;
		width:100%;
		justify-content: space-between;
		align-items: center;
		transform: scale(0.9);
		
		&.active{
			padding:8px 6px;
			background-color: #db720a26;;;
			transform: scale(1.1);
			translate:-2%;
		}
	}
	
	.record-item-spot{
		max-width: 80%;
		gap:4px;
	}
	
	.record-item-check{
		image{
			visibility: hidden;
			&.active{
				visibility: visible;
			}
		}
	}
	
	.spot-info{
		max-width: 60%;
		justify-content: space-between;
		text{
			overflow:hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	
	.spot-image{
		@include border-four-roundings;
		overflow: hidden;
		padding:2px;
		
		image{
			width:100%;
			height:100%;
			border-radius: 10px;
		}
	}
</style>